<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/_reset.scss">
    <link rel="stylesheet" type="text/css" href="css/vue02.scss">
    <script src="//cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
    <script src="js/main.js"></script>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app" class="app">
          <div>
                    <!-- <button v-on:click="showHide" class="btn-show-hide">{{showhide}}</button>-->
                     <div class="op-add">
                         <input type="text" v-model="input">
                         <button v-on:click="addNode">add</button>
                     </div>
                     <div class="goodList">
                        <ul>
                            <li v-for="name in listgood">
                                <a v-bind:href="name.href">{{name.goodname | capitalize  }}</a>
                                <button @click="deleteNode($index)" :disabled="showhide">X</button>
                            </li>
                        </ul>
                     </div>   
          </div>
 </div>
</body>
<script src="js/vue02.js"></script>
</html>